<template>
    <view class='page'>
        <u-navbar title="紧急联系人" :back-icon-color="'#ffffff'" :title-color="'#ffffff'" :background="background"></u-navbar>
        <view class="box1">
            <view class="list box" v-for="item,index in loadData" :key="index">
                <view class="txt">
                    <text class="p p0">{{item.name}} {{item.contact}}</text>
                    <text class="p">与长者关系：{{selectDictLabel(withList,item.with)}}</text>
                </view>
                <view class="btn">
                    <view class="pic" @tap="callContact(item.contact)">
                        <image :src="$imgUrl+'my/tel.png'" mode="heightFix"></image>
                    </view>
                    <view class="pic" @tap="editContact(item)">
                        <image :src="$imgUrl+'my/edit.png'" mode="heightFix"></image>
                    </view>
                    <view class="pic" @tap="delContact(item.id)">
                        <image :src="$imgUrl+'my/del.png'" mode="heightFix"></image>
                    </view>
                </view>
            </view>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <view class="foot-add">
            <button v-if="isLogin" type="default" @click="goPage()">新增</button>
        </view>
        <!-- #endif -->
        <no-data noneTitle="暂无联系人" noneImg="../../static/noData/content.png" type="contact" v-if="loadData.length==0"></no-data>
        <!-- 提示框 -->
        <DialogBox ref="DialogBox"></DialogBox>
        <loading :show="loading"></loading>
    </view>
</template>

<script>
import { getContactLists, delContacts } from "@/api/my/contact.js"
import { relationship } from "@/api/dictionary.js"
export default {
    components: {},
    data() {
        return {
            loadData: [],
            isLoad: false,
            withList: relationship,
            loading: false,
            $imgUrl: this.$imgUrl,
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
            isLogin: uni.getStorageSync('token') ? true : false,
        };
    },
    onShow() {
        if (this.isLogin) {
            this.getList()
        }
    },
    onLoad(options) {

    },
    methods: {
        getList() {
            this.loading = true
            getContactLists({ limit: 20, page: 1 }).then((res) => {
                this.loadData = res.data.lists
                // this.loadData = []
                this.pagenum = res.data.pageCount
                this.loading = false
            })
        },
        callContact(phone) {
            const res = uni.getSystemInfoSync();
            if (res.platform == 'ios') {
                uni.makePhoneCall({
                    phoneNumber: phone,
                    success() {
                        console.log('拨打成功了');
                    },
                    fail() {
                        console.log('拨打失败了');
                    }
                })
            } else {
                uni.showActionSheet({
                    itemList: [phone, '呼叫'],
                    success: function (res) {
                        console.log(res);
                        if (res.tapIndex == 1) {
                            uni.makePhoneCall({
                                phoneNumber: phone,
                            })
                        }
                    }
                })
            }
        },
        editContact(row) {
            uni.navigateTo({
                url: "/pagesA/my/addContact?data=" + encodeURIComponent(JSON.stringify(row))
            })
        },
        delContact(ids) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要删除该联系人?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                delContacts({ contact_id: ids }).then((res) => {
                    if (res.code == 1) {
                        this.$message("操作成功")
                        this.getList()
                    }
                })
            }).catch(() => {

            })
        },
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        /**
        * 跳转点击
        */
        goPage() {
            let url = "/pagesA/my/addContact"
            uni.navigateTo({
                url: url
            })
        },
    },
};
</script>
<style scoped lang='scss'>
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;

  /* 顶部返回 */
  .head-back {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    background: linear-gradient(to bottom right, #2e996f, #3f99ab);
    /* #ifdef APP-PLUS */
    height: calc(100rpx + var(--status-bar-height));
    padding-top: var(--status-bar-height);
    /* #endif */
    /* #ifdef MP-WEIXIN */
    height: calc(100rpx + var(--status-bar-height));
    padding-top: 20rpx;
    /* #endif */
    .back {
      position: absolute;
      left: 0;
      top: 0;
      /* #ifdef APP-PLUS */
      padding-top: var(--status-bar-height);
      /* #endif */
      /* #ifdef MP-WEIXIN */
      padding-top: 20rpx;
      /* #endif */
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100rpx;
      height: 100%;

      text {
        width: 20rpx;
        height: 20rpx;
        border-left: 2rpx solid #ffffff;
        border-bottom: 2rpx solid #ffffff;
        transform: rotate(45deg);
      }
    }

    .title {
      display: flex;
      align-items: center;

      text {
        font-size: 28rpx;
        color: #ffffff;
      }
    }

    .more-icon {
      position: absolute;
      right: 0;
      top: 0;
      /* #ifdef APP-PLUS */
      right: 0rpx;
      padding-top: var(--status-bar-height);
      /* #endif */
      /* #ifdef MP-WEIXIN */
      right: 220rpx;
      padding-top: 20rpx;
      /* #endif */
      display: flex;
      align-items: center;
      height: 100%;

      .icon-list {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 100%;

        text {
          font-size: 60rpx;
          color: #ffffff;
        }
      }
    }
  }

  .box1 {
    .list {
      background-color: #ffffff;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      padding: 40rpx 0;

      .txt {
        padding-left: 20rpx;

        text {
          display: block;
        }

        .p {
          font-size: 28rpx;
          color: #343434;
        }

        .p0 {
          padding-bottom: 20rpx;
        }
      }

      .btn {
        display: flex;
        justify-content: space-between;
        margin-right: 20rpx;
        .pic {
          padding: 20rpx;
          image {
            height: 40rpx;
          }
        }
      }
    }
  }
  //   #ifdef MP-WEIXIN
  .foot-add {
    position: fixed;
    bottom: 50rpx;
    left: 0;
    width: 100%;

    button {
      width: 650rpx;
      height: 90rpx;
      background-color: $base;
      border-radius: 6rpx;
      color: #ffffff;
      font-size: 32rpx;
      line-height: 90rpx;
    }
  }
  //   #endif
}
</style>